<template>
  <div class="container">
    <div class="left-form">
      <form-comp
        ref="formRef"
        labelWidth="80"
        :form-item="formItem"
        v-model:formData="formData"
      ></form-comp>
    </div>
    <div class="template-wrap">
      <design-comp :templateData="templateData" :article="true"></design-comp>
    </div>
  </div>
</template>

<script setup lang="ts">
import DesignComp from '../components/DesignCenter.vue'
import { onMounted, onUnmounted, ref } from 'vue'
import {
  reqDataBaseArticleBody,
  respDataBaseTemplate,
} from '@/api/types/database'
import { useRoute, useRouter } from 'vue-router'
import { FormItemType } from '@/components/form/type'
import {
  API,
  reqAddOrUpdateDataBaseArticle,
  reqGetDataBaseArticleDetail,
} from '@/api/database.ts'
import { reactive } from 'vue'
import FormComp from '@/components/form/form.vue'
import emitter from '@/utils/emitter.ts'
import { MsgError, MsgSuccess } from '@/utils/utils.ts'

const route = useRoute()
const router = useRouter()

onMounted(() => {
  emitter.on('designFormItem', onSubmitDesignFormItem)
  if (route.query.id) getDataBaseArticles()
})
onUnmounted(() => emitter.off('designFormItem'))

const formItem = ref<FormItemType[]>([
  {
    type: 'input',
    label: '标题',
    prop: 'articleName',
    required: true,
  },
  {
    type: 'textarea',
    label: '文章简介',
    prop: 'articleSummary',
    required: true,
  },
  {
    type: 'cascader',
    label: '数据库',
    prop: 'categoryId',
    required: true,
    props: { label: 'databaseCategoryName', value: 'parentCategoryId' },
    async: {
      url: API.DATA_BASE_CATEGORY_URL,
      method: 'post',
      fetchSearch: true,
      initRequest: true,
    },
  },
  {
    type: 'select',
    label: '选择模板',
    prop: 'articleTemplate',
    required: true,
    props: { label: 'templateName', value: 'id' },
    async: {
      url: API.DATA_BASE_TEMPLATE_URL,
      method: 'post',
      fetchSearch: true,
      initRequest: true,
    },
    callback: (val) => onChangeTemplate(val),
  },
])
const formData = reactive<reqDataBaseArticleBody>({
  articleName: '',
  articleTemplate: 0,
  articleSummary: '',
  categoryId: '',
  articleContext: [],
})

const getDataBaseArticles = async () => {
  const id = route.query.id as string
  const { data } = await reqGetDataBaseArticleDetail(id)
  formData.id = data.id
  formData.articleName = data.articleName
  formData.articleSummary = data.articleSummary
  // formData.categoryId = data[0].
  formData.articleTemplate = data.articleTemplate
  // formData.articleContext = data.articleContext

  templateData.value.id = data.articleTemplate
}

const templateData = ref<Partial<respDataBaseTemplate>>({})
const onChangeTemplate = (val: number) => {
  templateData.value.id = val
  formData.categoryId = val
}

const onSubmitDesignFormItem = async (val: FormItemType[]) => {
  val.forEach((item, key) => {
    formData.articleContext.push({
      sequence: key,
      context: JSON.stringify(item),
      isLink: '',
      linkedURL: '',
    })
  })
  const { code, data } = await reqAddOrUpdateDataBaseArticle(formData)
  if (code === 0 && data) {
    MsgSuccess('提交成功')
    router.back()
  } else {
    MsgError('提交失败')
  }
}
</script>

<style scoped lang="scss">
.container {
  background-color: #f0f2f5;
  padding-top: 16px;
  display: flex;
  justify-content: center;
  .left-form {
    padding: 10px;
    width: 400px;
    margin-right: 20px;
    background-color: #fff;
  }
  .template-wrap {
    background-color: #fff;
    padding: 16px;
  }
}
</style>
